<template>
    <a-textarea allowClear :rows="4" @change="inputVal" class="w-full" v-model:value="value" :placeholder="props.placeholder" :show-count="!props.maxNum ? false : true" :maxlength="props.maxNum" />
</template>
<script setup>
const emits = defineEmits(['update:value', 'change'])
const props = defineProps({
    value: String,
    placeholder: {
        type: String,
        default: '请输入',
    },
    // 最大长度
    maxNum: {
        type: Number,
        default: undefined,
    },
    // 是否展示字数
    showCount: {
        type: Boolean,
        default: true,
    },
})
const state = reactive({
    value: undefined,
})
state.value = props.value

const inputVal = val => {
    emits('update:value', state.value)
    emits('change', state.value)
}
watch(
    () => props.value,
    (newVal, oldVal) => {
        if (newVal === undefined) {
            state.value = undefined
        } else {
            state.value = newVal
        }
    },
    { deep: true }
)
defineExpose({})
const { value } = toRefs(state)
</script>
